<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>button</title>
    <link rel="stylesheet" href="../css/reset.css"/>
</head>
<body>
   <div id="app">
       <w-button @singleclick="_click()">hello</w-button>
       <w-button :button-style="buttonStyle" @singleclick="_click()">hello</w-button>
   </div> 
</body>

<script src="../js/vue.min.js"></script>
<script src="../js/color-constants.js"></script>

<script type="text/x-template" id="button-template">
    <div>
        <div  @touchstart="touchstart()" @touchend="touchend()" :style="[normalStyle, tapStyle]"> <slot>你好世界</slot></div>
    </div>
</script>

<!-- 定义组件 -->
<script>
    // 定义按钮组件的样式类，如果想要自定义按钮样式，只需提供相同接口的样式类即可
    function buttonStyle() {
        this.defaultStyle = {
            "width": "100%",
            "height": "40px",
            "background-color": "#e2e2e2",
            "text-align": "center",
            "line-height": "40px",
            "border-radius": "40px",
            "color": "white"
        },

        this.defaultTapStyle = {
            "opacity": ".8",
            "box-shadow": "0px 0px 2px #666" 
        }
    }

    // 按钮组件
    Vue.component("w-button", {
        template:"#button-template",
        data: function() {
            return {
                defaultButtonStyle: null,
                normalStyle: {},
                tapStyle: {}
            }
        },
        props: ["button-style"],
        methods: {
            touchstart: function() {
                this.tapStyle = this.defaultButtonStyle.defaultTapStyle
            },
            touchend: function() {
                this.tapStyle = {}
                this.$emit("singleclick")
            }
        },
        created: function() {
            if(this.buttonStyle != undefined) {
                this.defaultButtonStyle = this.buttonStyle
            } else {
                this.defaultButtonStyle = new buttonStyle()
            }
            this.normalStyle = this.defaultButtonStyle.defaultStyle;
        }
       
    })

</script>

<!-- 组件的使用 -->
<script>
    // 自定义按钮的样式
    function myButtonStyle() {
        this.defaultStyle = {
            "width": "100%",
            "height": "40px",
            "background-color": ColorKit.themeLightBlue,
            "text-align": "center",
            "line-height": "40px",
            "border-radius": "40px",
            "color": "white"
        },

        this.defaultTapStyle = {
            "opacity": ".8",
            "box-shadow": "0px 0px 2px " + ColorKit.gray7
        }
    }

    new Vue({
        el:"#app",
        data: {
            buttonStyle: new myButtonStyle()
        },
        methods: {
            _click: function() {
                console.log("单击了")
            }
        }
    })
</script>
</html>
